<template>
  <div class="container">
    <div class="user-setting">
      <img src="" alt="">
      <span>{{ name || '未登录' }}</span>
      <button @click="emitLogin">退出登录</button>
    </div>
    <div class="theme">
      <span>绿</span>
      <el-switch v-model="value2" class="ml-2" style="--el-switch-on-color: #ff4949; --el-switch-off-color: #13ce66"
        @change="handleSwitchChange" size="large" />
      <span>红</span>
    </div>
  </div>
</template>

<script setup>
// import { ref, defineEmits } from 'vue';

// const value2 = ref(true);
// // 定义自定义事件
// const emits = defineEmits(['switchChanged']);

// const handleSwitchChange = (newValue) => {
//   // 触发自定义事件并传递开关的新状态
//   emits('switchChanged', newValue);
// };

import { ref, onMounted } from 'vue';
import { useThemeStore } from '@/stores/themeStore';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/userStore';

const router = useRouter()

// 获取主题存储实例
const themeStore = useThemeStore();
// 用于清除用户信息
const userStore = useUserStore()

// 从存储中获取初始状态
const value2 = ref(themeStore.isRedTheme);
const name = ref(localStorage.getItem('userName'))

const handleSwitchChange = (newValue) => {
  // 更新存储中的主题状态
  themeStore.setTheme(newValue);
  // 更新本地状态
  value2.value = newValue;
};
console.log(userStore.userInfo);

// 退出登录
const emitLogin = () => {
  // 清除token
  localStorage.removeItem('token')
  localStorage.removeItem('userName')
  // 清除用户信息
  userStore.clearUserInfo()
  // 回到登录页
  router.push('/login')
}

</script>


<style scoped>
.container {
  left: 200px;
  background-color: rgb(248, 32, 180);
  height: 70px;
}

.theme {
  float: right;
  line-height: 70px;
  margin-right: 20px;
}

.user-setting {
  float: right;
  line-height: 70px;
  margin-right: 10px;
}
</style>